<template>
  <view style="padding: 0 32rpx 0;" >
    <z-nav-bar id="nav" bgColor="#ffffff" :title="pageTitle"></z-nav-bar>
    <public-module></public-module>
    <view class="title">
      问题与建议
      <view class="txt">
        *
      </view>
    </view>
    <view class="suggest">
      <textarea class="txtarea" v-model="describe" placeholder="请详细描述问题，谢谢您的支持" placeholder-style="color:#ccc;"  maxlength="1000" @input="txtareaInput"/>
      <z-upload-image limit="6" v-model:files="specialPic" action-type="custom">
        <view class="img-upload">
          <view class="img-item flex-aj-center">
            <view class="side">
              <view class="side"></view>
            </view>
          </view>
        </view>
      </z-upload-image>
    </view>


    <view class="title">
      用户姓名
      <view class="txt">
        *
      </view>
    </view>
    <view class="cont-vessel">
      <input type="text" v-model="createUserName" placeholder="请输入姓名" placeholder-style="color:#999;font-size:28rpx;" />
    </view>
    <view class="title">
      联系方式
      <view class="txt">
        *
      </view>
    </view>
    <view class="cont-vessel">
      <input type="txt"v-model="contactInfo" placeholder="请输入电话或邮箱" placeholder-style="color:#999;font-size:28rpx;"/>
    </view>


    <view class="bottom-btn-box">
      <main-button :color="'#fff'" :margin="'24rpx 0 0'" :isDGradient="true" @click="submit">提交</main-button>
      <!-- navigateTo('/pagesMy/expense_details') -->
    </view>
  </view>
</template>

<script setup>
import {systemFeedback} from '@/api/pagesMy/user'
import { onLoad } from '@dcloudio/uni-app';
import {ref} from "vue";
import { navigateTo } from '@/utils/navigator'
// import { addReport } from '@/api/user';
let app = getApp();
const statusBarHeight = ref("")
statusBarHeight.value = app.globalData.statusBarHeight;
//-----------------------------------data---------------------

let isAppear = ref(true)
let appearList = ref(['很少出现','一天一次','一天多次','始终出现'])
let appearIndex = ref(0)
let type = ref('0')//'1''举报商家' '0''意见反馈'
let pageTitle = ref('意见反馈')
let storeId = ref(null)
let specialPic = ref("")
let describe = ref("")
let timeOc = ref("")
let contactDetails = ref("")
const createUserName = ref("")
const contactInfo = ref("")
//---------------------------------------onload--------------

onLoad((e)=>{
  console.log(e,'e')
  if(e.type=='1'){
    pageTitle.value = '举报商家'
    isAppear.value = false
    type.value = e.type
    storeId.value = e.storeId
  }
})

//-----------------------------------function----------------

function txtareaInput(e){
  console.log(e)
  if(describe.value.length==100){
    uni.showToast({
      title: '最多只能输入100个字',
      duration: 2000,
      icon:'none',
      position:'top'
    });
  }
}

function changetimeOc(e) {
  console.log('change事件:', e);
}

function submit(){
  setReport()
}

function setReport(){
  if(!describe.value){
    uni.showToast({title:'请填写描述',icon:'none'})
    return
  }
  if(!createUserName.value){
    uni.showToast({title:'请填写姓名',icon:'none'})
    return
  }
  if(!contactInfo.value){
    uni.showToast({title:'请填写手机号码',icon:'none'})
    return
  }
  systemFeedback({
    content: describe.value,
    createUserName: createUserName.value,
    contactInfo:contactInfo.value,
    feedbackSource:'用户端',
    status: "未读",
    images: specialPic.value,
  }).then(res=>{
    uni.showToast({
      title: '提交成功',
      duration: 2000,
      icon:'none',
    });
    uni.navigateBack()
  })

}

</script>

<style>
page{
  background-color: #fff;
}
</style>
<style lang="scss">
@import "./style/common.scss";
.title{
  display: flex;
  align-items: center;
  margin: 32rpx 0 20rpx;
  font-weight: bold;
  .txt{
    color: #FF243B;
  }
}
.suggest{
  width: 686rpx;
  min-height: 424rpx;
  border-radius: 16rpx;
  background-color: #F7F7F7;
  padding: 24rpx;
  .txtarea{
    width: 638rpx;
    height: 204rpx;
    color: #999;
    overflow: hidden;
    // background-color: #FF243B;
  }
  .img-upload{
    position: relative;
    image{
      width: 132rpx;
      height: 132rpx;
      border-radius: 20rpx;
      background-color: #ccc;
      margin-right: 20rpx;
    }
    .img-item{
      width: 132rpx;
      height: 132rpx;
      border-radius: 20rpx;
      border: 2rpx dashed #ccc;
      color: #ccc;
      font-size: 80rpx;
      font-weight: lighter;
      .side{
        width: 37rpx;
        height: 2.5rpx;
        background-color: #ccc;
        .side{
          width: 37rpx;
          height: 2.5rpx;
          background-color: #ccc;
          transform: rotateZ(90deg);
        }
      }
    }
  }
}
.appear-item{
  padding: 6rpx 16rpx;
  background-color: #E8E8E8;
  margin-right: 24rpx;
  border-radius: 23rpx;
  color: #656565;
}
.appear-item-active{
  background-color: #999;
  color: #fff;
}
.round-fail{
  width: 25rpx;
  height: 25rpx;
  position: absolute;
  top: -7rpx;
  right: 15rpx;
  background-color: #8B8B8B;
  border-radius: 50%;
  .long-side{
    width: 14rpx;
    height: 2rpx;
    background-color: #fff;
    transform: rotateZ(135deg);
    border-radius: 1rpx 0 0 1rpx;
    position: absolute;
    top: 45%;
    left: 24%;
    .long-side{
      width: 14rpx;
      height: 2rpx;
      background-color: #fff;
      transform: rotateZ(90deg);
      border-radius: 1rpx 0 0 1rpx;
      position: absolute;
      top: 0rpx;
      left: 0rpx;
    }
  }
}
::v-deep .z-upload-image_grid{
  display: flex!important;
  flex-wrap: wrap;
}
.z-upload-image{
  display: flex!important;
  flex-wrap: wrap;
}
.z-image-item {
  width: 132rpx!important;
  height: 132rpx!important;
  border-radius: 16rpx;
  margin: 5rpx 8rpx;
}
::v-deep .uni-date-x{
  background-color: #F7F7F7!important;
}
::v-deep .uni-date-x--border{
  border: none!important;
}
::v-deep .uni-input-placeholder{
  font-size: 28rpx!important;
}
::v-deep .uni-input-input{
  font-size: 28rpx!important;
}
// ::v-deep .uniui-calendar::before{
// 	content: '';
// }
// ::v-deep .uni-date__x-input{
// 	padding: 0;
// }
// ::v-deep .uni-date-x{
// 	padding: 0;
// }
</style>
